<template>
	<div class="math-formula" id="mathRef">
		<h1 style="text-align: center;">公式展示</h1>
		<div class="math-formula-panel">
			<h1 style="font-weight: 600;">生命线工程易损性分析</h1>
			<Lifeline></Lifeline>
		</div>
		<div class="math-formula-panel">
			<h1 style="font-weight: 600;">建筑物结构易损性分析</h1>
			<Building></Building>
		</div>
	</div>
</template>

<script setup>
import { ref } from 'vue';
// 引入公式
import Building from './building.vue';
import Lifeline from './lifeline.vue';
// 获取当前实例
const { proxy } = getCurrentInstance();
// 当前dom对象
const mathRef = ref();
</script>

<style lang="scss" scoped>
.math-formula {
	padding: 20px;

	.math-formula-panel {
		margin-top: 40px;

		>div {
			padding: 0 20px;
		}
	}

	.el-collapse {
		--el-collapse-header-font-size: 20px;
		--el-collapse-content-font-size: 24px;

		.collapse-formula {
			text-align: center;
		}
	}
}
</style>